import React from 'react';
import { Link } from 'react-router-dom';
import { Table, Input } from 'antd';
import axios from 'axios';
import { apiPrefix } from '../../../shared/api';
import './index.less';


const columns = [
  {
    title: '序号',
    dataIndex: '',
    render: ((text, recode, index) => index + 1)
  },
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '性别',
    dataIndex: 'sex',
    key: 'sex',
  },
  {
    title: '身份证号',
    dataIndex: 'idcard',
    key: 'idcard',
  },
  {
    title: '员工编号',
    dataIndex: 'erp_id',
    key: 'erp_id',
  },
  {
    title: '账号',
    dataIndex: 'username',
    key: 'username',
  },
  {
    title: '操作',
    dataIndex: '',
    render: ((text, recode, index) => (
      <div key={index}>
        <Link to={`/system/users/userForm/${recode.id}`} className="sure-button">编辑</Link>
        <button className="clearButton">删除</button>
      </div>
    )) },
];
class Users extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      users: [],
    };
  }
  componentDidMount() {
    const api = `${apiPrefix}api/v1/unirole/users`;
    axios.get(api)
      .then((response) => {
        this.setState({ users: response.data.data });
        console.log(this.state.users);
      });
  }
  render() {
    const { users } = this.state;
    return (
      <div className="content">
        <div>
          <h3>
          用户管理
            <Link to="/system/users/userForm" className="addButton" style={{ float: 'right' }}>添加用户</Link>
          </h3>
          <section className="uers-section">
            <div>
              <span>账号</span>
              <Input
                style={{ width: 200 }}
              />
            </div>
            <div>
              <span>身份证号</span>
              <Input
                style={{ width: 200 }}
              />
            </div>
            <div>
              <span>员工编号</span>
              <Input
                style={{ width: 200 }}
              />
            </div>
            <div>
              <span>姓名</span>
              <Input
                style={{ width: 200 }}
              />
            </div>
            <button
              className="queryButton"
            >
              查询
            </button>
          </section>
          <Table
            className="user-table"
            rowKey="id"
            size="small"
            pagination={false}
            columns={columns}
            dataSource={users}
          />
        </div>
      </div>
    );
  }
}

export default Users;
